function addWatermarkToImage(image: HTMLImageElement, watermarkText: string) {
  // 检测浏览器是否支持 canvas
  if (!document.createElement("canvas").getContext) {
    console.error("当前浏览器不支持 canvas，无法添加水印。");
    return null;
  }

  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;

  // 获取设备像素比
  const dpr = window.devicePixelRatio || 1;

  // 根据设备像素比调整 canvas 的宽度和高度
  canvas.width = image.width * dpr;
  canvas.height = image.height * dpr;

  // 设置 canvas 的样式宽度和高度为原始图片的宽度和高度
  canvas.style.width = `${image.width}px`;
  canvas.style.height = `${image.height}px`;

  // 根据设备像素比进行缩放
  ctx.scale(dpr, dpr);

  // 将图片绘制到 canvas 上
  ctx.drawImage(image, 0, 0, image.width, image.height);

  // 设置字体样式
  ctx.font = "20px Arial";
  // 将文本按换行符分割成多行
  const lines = watermarkText.split("\\n");

  let maxTextWidth = 0;
  const lineHeight = 25; // 行高，可根据需要调整

  // 计算所有行中最大的文本宽度
  lines.forEach((line) => {
    const textMetrics = ctx.measureText(line);
    const textWidth = textMetrics.width;
    if (textWidth > maxTextWidth) {
      maxTextWidth = textWidth;
    }
  });

  // 旋转角度
  const rotationAngle = -Math.PI / 8;

  // 调整水印之间的间隔
  const xInterval = 180;
  const yInterval = 180;

  // 重新设置字体样式
  ctx.font = "20px Arial";
  ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";

  // 循环绘制水印
  for (let x = 0; x < canvas.width / dpr; x += xInterval) {
    for (let y = 0; y < canvas.height / dpr; y += yInterval) {
      // 保存当前画布状态
      ctx.save();
      // 平移画布
      ctx.translate(x, y);
      // 旋转画布
      ctx.rotate(rotationAngle);

      // 逐行绘制文本
      let yOffset = (-(lines.length - 1) * lineHeight) / 2;
      lines.forEach((line) => {
        ctx.fillText(line, 0, yOffset);
        yOffset += lineHeight;
      });

      // 恢复画布状态
      ctx.restore();
    }
  }

  return canvas;
}

export default addWatermarkToImage;
